<template>
  <div class="order combground">
    <div class="container">
      <div class="local cursor" @click="$router.back()">
        <img src="~/assets/images/local.png" alt="" />
        <span>返回上一级</span>
      </div>
      <div class="comtitle">
        <h2 class="comh2">确认订单信息</h2>
      </div>
      <div class="content">
        <div class="receiver">
          <div class="title-and-new">
            <p class="title">收货人信息</p>
          </div>
          <div class="address-list clearfix">
            <div
              class="item transition cursor"
              v-for="(item, index) in addressList"
              :key="index"
              :class="addressChosen == item.address_id ? 'active' : ''"
              @click="selectAddress(item.address_id)"
            >
              <div class="name">
                {{ item.real_name }}
                <span v-if="item.is_default" class="default">默认地址</span>
              </div>
              <div class="phone">{{ item.phone }}</div>
              <div class="company">{{ item.company }}</div>
              <div class="address">
                {{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}
              </div>
              <div class="checkbox">
                <div class="checkItem transition"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="checklist">
          <p class="title">商品清单</p>
          <div class="item" v-for="(item, index) in info.list" :key="index">
            <div class="merchant-and-number" v-if="item.mer_id !== 0">
              <p class="merchant">
                商家：{{ item.product_list && item.product_list[0].mer.mer_name }}
              </p>
            </div>
            <Table class="table-head">
              <table-column label="商品信息" align="center" width="350" />
              <table-column label="商品单价" align="center" />
              <table-column label="数量" align="center" />
              <table-column label="小计" align="center" />
            </Table>
            <Table :data="item.product_list" border :show-header="false">
              <table-column
                prop="name"
                label="商品信息"
                align="center"
                width="350"
              >
                <template v-slot="{ row }">
                  <div class="table-name">
                    <img :src="row.product.image" alt="" class="pic" />
                    <p class="name">{{ row.product.store_name }}</p>
                  </div>
                </template>
              </table-column>
              <table-column prop="price" label="商品单价" align="center">
                <template v-slot="{ row }">
                  <div class="table-price">￥{{ row.product.price }}</div>
                </template>
              </table-column>
              <table-column prop="quantity" label="数量" align="center">
                <template v-slot="{ row }">
                  <div class="table-quantity">×{{ row.cart_num }}</div>
                </template>
              </table-column>
              <table-column prop="total" label="小计" align="center">
                <template v-slot="{ row }">
                  <div class="table-total">￥{{ row.total_price }}</div>
                </template>
              </table-column>
            </Table>
            <div class="table-tail">
              <p class="prompt">
                提示：如与商家沟通好价格调整，请联系或等待商家在后台调整价格后再支付。
              </p>
              <div class="total">
                合计：<span class="keywords">￥{{ item.total_price || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="payment">
          <p class="title">支付方式</p>
          <ul class="payment-list clearfix">
            <li
              :class="activeIndex === 1 ? 'active' : ''"
              @click="handleAilpay"
            >
              <img src="@/assets/images/pay/alipay.d834fcda.png" alt="alipay" />
            </li>
            <li :class="activeIndex === 2 ? 'active' : ''" @click="handleWxPay">
              <img src="@/assets/images/pay/weixin.8f9c6e77.png" alt="weixin" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MCheckbox from "@/components/common/m-checkbox/MCheckbox";
import { CheckboxGroup, RadioGroup, Table, TableColumn } from "element-ui";
import MInput from "@/components/common/m-input/MInput";
import MButton from "@/components/common/m-button/MButton";
import MRadio from "@/components/common/m-radio/MRadio";
import MDialog from "@/components/common/m-dialog/MDialog";
import MForm from "@/components/common/m-form/MForm";
import MFormItem from "@/components/common/m-form/MFormItem";
import MSelect from "@/components/common/m-select/MSelect";
import { previewOrder, getInvoice, getAddress } from "@/request/api";

export default {
  name: "Order", // 确认订单
  components: {
    MSelect,
    MFormItem,
    MForm,
    MDialog,
    MRadio,
    MButton,
    MInput,
    MCheckbox,
    CheckboxGroup,
    Table,
    TableColumn,
    RadioGroup,
  },
  data() {
    return {
      info: "",
      cart_id: "",
      address_id: "",
      invoiceList: [],
      addressList: [],
      addressChosen: "",
      invoiceChosen: "",
      invoice_add_type: 0,
      invoice_address: "",
      merchant: "",
      orderNumber: "",
      products: [],
      checkList: [],
      send: "",
      sendAddress: "",
      payment: 0,
      showAddress: false,
      showInvoice: false,
      addressFormData: {},
      invoiceFormData: {},
      activeIndex: 1,
    };
  },
  created() {
    this.cart_id = this.$common.stringToArr(this.$route.query.cart_id);
    this.getInvoiceList();
    this.getAddressList();
    this.getInfo();
  },
  methods: {
    selectInvoice(id) {
      this.invoiceChosen = id;
    },
    selectAddress(id) {
      this.addressChosen = id;
    },
    /**
     * @param {type} cart_id 
     * 获取订单信息
     */
    getInfo() {
      let data = {
        cart_id: this.cart_id,
      };
      previewOrder(data)
        .then((res) => {
          this.info = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    getInvoiceList() {
      getInvoice()
        .then((res) => {
          this.invoiceList = res.data.data;
          if (this.invoiceList.length > 0) {
            this.invoiceChosen = this.invoiceList[0].id;
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    getAddressList() {
      getAddress()
        .then((res) => {
          this.addressList = res.data.list.data;
          if (this.addressList.length > 0) {
            this.addressChosen = this.addressList[0].address_id;
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    // 支付宝支付
    handleAilpay() {
      this.activeIndex = 1;
    },
    // 微信支付
    handleWxPay() {
      this.activeIndex = 2;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.local {
  color: #656565;
  margin-bottom: 20px;
}

.local img {
  margin-right: 10px;
}

.order {
  padding: 30px 0 80px 0;

  .content {
    margin-top: 50px;
    font-size: 16px;

    .receiver {
      padding: 65px 50px;
      background-color: #fff;
      font-size: 16px;
      color: #666;
      margin-bottom: 50px;

      .title-and-new {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;

        .title {
          font-size: 20px;
          color: #000;
          font-weight: bold;
        }

        .new {
          color: $theme-color-1;
          cursor: pointer;
        }
      }

      .address-list {
        background-color: rgb(243, 244, 247);
        padding: 15px;
        margin: -10px;

        .item {
          width: calc((100% - 60px) / 3);
          margin: 10px;
          height: 167px;
          display: block;
          float: left;
          padding: 10px;
          padding-right: 50px;
          background-color: #fff;
          position: relative;

          > div:not(:last-of-type) {
            margin-bottom: 8px;
          }

          .name {
            position: relative;
            display: inline-block;
          }

          .default {
            position: absolute;
            right: -84px;
            width: 74px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            font-size: 14px;
            border-radius: 11px;
            color: #fff;
            background-color: $theme-color-1;
          }

          .checkbox {
            position: absolute;
            right: 10px;
            top: 10px;
          }

          .checkItem {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            margin: 0 auto;
            cursor: pointer;
            border-radius: 5px;
            position: relative;
          }
        }

        .active {
          background: $theme-color-1;
          color: #fff;

          .default {
            background: #fff;
            color: $theme-color-1;
          }

          .checkItem {
            background: #fff;
            border-color: #fff;
          }

          .checkItem:after {
            content: "";
            border: 2px solid $theme-color-1;
            border-left: 0;
            border-top: 0;
            height: 9px;
            left: 6px;
            position: absolute;
            top: 2px;
            transform: rotate(45deg);
            width: 4px;
            transition: transform 0.15s ease-in 0.05s;
            transform-origin: center;
          }
        }
      }

      .address-empty {
        background-color: rgb(243, 244, 247);
        padding: 15px;
        min-height: 210px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .checklist {
      padding: 65px 50px;
      background-color: #fff;
      font-size: 16px;
      color: #666;
      margin-bottom: 50px;

      .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 30px;
      }

      .item {
        &:not(:last-of-type) {
          margin-bottom: 50px;
        }

        .merchant-and-number {
          display: flex;
          padding: 15px;
          border: 2px solid #f3f4f7;

          .merchant {
            margin-right: 50px;
          }
        }

        .table-head {
          /deep/ .el-table__body-wrapper {
            height: 0;
          }

          /deep/ th {
            color: #666;
            background-color: #f3f4f7;
          }
        }

        .table-name {
          display: flex;
          align-items: center;

          .pic {
            width: 140px;
            height: 140px;
            margin-right: 15px;
          }
        }

        .table-total {
          color: $theme-color-1;
        }

        .table-tail {
          border: 1px solid #ebeef5;
          border-top: none;
          padding: 30px 20px;

          .prompt {
            font-size: 14px;
            color: #969696;
            margin-bottom: 30px;
          }

          .remarks {
            margin-bottom: 30px;

            .text {
              margin-bottom: 15px;
            }
          }

          .total {
            font-size: 18px;

            .keywords {
              font-size: 20px;
              color: #000;
              font-weight: bold;
            }
          }
        }
      }
    }

    .invoice {
      padding: 65px 50px;
      font-size: 16px;
      color: #666;
      background-color: #fff;
      margin-bottom: 50px;

      .title-and-new {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        .title {
          font-size: 20px;
          font-weight: bold;
          margin-right: 50px;
        }

        .new {
          color: $theme-color-1;
          cursor: pointer;
        }
      }

      .list {
        margin: -10px;
        margin-bottom: 30px;

        .item {
          width: calc((100% - 60px) / 3);
          height: 147px;
          margin: 10px;
          padding: 15px;
          padding-right: 50px;
          background-color: rgb(243, 244, 247);
          display: inline-flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;

          .default {
            display: inline-block;
            width: 74px;
            margin-left: 4px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            font-size: 14px;
            border-radius: 11px;
            color: #fff;
            background-color: $theme-color-1;
          }

          .checkbox {
            position: absolute;
            top: 10px;
            right: 10px;
          }

          .checkItem {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            margin: 0 auto;
            cursor: pointer;
            border-radius: 5px;
            position: relative;
          }
        }

        .active {
          background: $theme-color-1;
          color: #fff;

          .default {
            background: #fff;
            color: $theme-color-1;
          }

          .checkItem {
            background: #fff;
            border-color: #fff;
          }

          .checkItem:after {
            content: "";
            border: 2px solid $theme-color-1;
            border-left: 0;
            border-top: 0;
            height: 9px;
            left: 6px;
            position: absolute;
            top: 2px;
            transform: rotate(45deg);
            width: 4px;
            transition: transform 0.15s ease-in 0.05s;
            transform-origin: center;
          }
        }
      }

      .send {
        margin-bottom: 30px;

        .text {
          margin-right: 30px;
        }
      }
    }

    .payment {
      padding: 65px 50px;
      background-color: #fff;
      font-size: 16px;
      color: #666;

      .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 30px;
      }

      .payment-list {
        margin-top: 15px;

        li,
        li img {
          width: 173px;
          height: 59px;
        }

        li {
          float: left;
          margin-right: 14px;
          border: 1px solid #e7e7e7;
          list-style: none;
          cursor: pointer;
        }

        li.active {
          border: 1px solid #e38b2e;
        }
      }

      .clearfix:before {
        content: " ";
        display: table;
      }
    }

    > .total {
      padding: 10px 15px;
      background-color: $theme-color-1;
      color: #fff;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .count {
        .keywords {
          font-size: 20px;
          margin: 0 10px;
        }
      }

      .cost-and-pay {
        display: flex;
        align-items: center;

        .cost {
          font-weight: bold;
          font-size: 20px;
          margin-right: 30px;
        }

        .pay-inner {
          font-size: 18px;
          font-weight: bold;
          color: $theme-color-1;
        }
      }
    }
  }
}
</style>
